<script>
    Vue.component('stock-sales', {
        template: `
<div class="stock-sales-com">
  <!---销售采购--->
  <el-row>
    <el-col :span="10">
     <div class="l-p">
         <div class="operate-search">
            <el-form :inline="true" v-model="recordSearchForm" class="form-inline">
                <el-form-item size="mini">
                    <el-input v-model="recordSearchForm.keywords" clearable @keyup.enter.native="search" placeholder="产品名称或者备注关键字"></el-input>
                </el-form-item>
                <el-form-item size="mini">
                   <el-button type="primary" @click="search">查询</el-button>
                   <el-button type="primary" @click="getAll">全部数据</el-button>
                </el-form-item>
            </el-form>
          </div>
      </div>
    </el-col>
    <el-col :span="14" class="t-r">
       <el-button type="primary" size="mini" @click="optSale" plain><i class="el-icon-upload"/> 销售出货</el-button>
       <el-divider direction="vertical"></el-divider>
       <el-button type="primary" size="mini" @click="optSaleRefund" plain><i class="el-icon-download"/> 销售退货</el-button>
       <el-divider direction="vertical"></el-divider>
       <el-button type="primary" size="mini" @click="optPurchase" plain><i class="el-icon-download"/> 采购进货</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" size="mini" @click="optPurchaseRefund" plain><i class="el-icon-download"/> 采购退货</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button type="info" size="mini" @click="refresh" class="frBtn" plain><i class="el-icon-refresh" /> 刷新</el-button>
    </el-col>
  </el-row>

  <!---库存账单流水记录--->
  <div style="height:10px;"></div>

  <el-card class="box-card" shadow="never">
      <div class="flow-box">
        <el-table
        :data="recordListData"
        style="width: 100%">
         <el-table-column
          prop="index"
          label="序号"
          align="center"
          width="60">
          <template slot-scope="scope">
            <span>#{{indexCal(scope.$index,'flow')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tally_date"
          align="center"
          label="账单日期">
        </el-table-column>
        <el-table-column
          prop="sales_type_str"
          align="center"
          label="操作类型">
        </el-table-column>
        <el-table-column
          prop="account_name"
          align="center"
          label="结算账户">
        </el-table-column>
        <el-table-column
          prop="category_name"
          align="center"
          label="所属分类">
        </el-table-column>
        <el-table-column
          prop="store_name"
          align="center"
          label="客户/供应商">
        </el-table-column>
        <el-table-column
          prop="total_num"
          align="center"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="tally_money"
          align="center"
          label="账单金额">
          <template slot-scope="scope">
             <p v-if="scope.row['record_type']==10" class="amount-in">
            + <span>{{ scope.row['tally_money'] }}</span>
            </p>
            <p v-if="scope.row['record_type']==20" class="amount-out">
            - <span>{{ scope.row['tally_money'] }}</span>
            </p>

          </template>
        </el-table-column>
        <el-table-column
          prop="memo"
          align="center"
          label="备注">
        </el-table-column>
        <el-table-column
          prop="state"
          align="center"
          label="账单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.arap_id > 0" type="info" size="mini">挂账
            <el-tooltip placement="top">
                <div slot="content">挂账单请在左侧菜单应收应付里集中处理！</div>
                   <i class="el-icon-warning-outline"></i>
            </el-tooltip>
            </el-tag>
            <el-tag v-else-if="scope.row.state == '1'" type="success" size="mini">{{scope.row.state_txt}}</el-tag>
            <el-tag v-else-if="scope.row.state == '0'" type="info" size="mini">{{scope.row.state_txt}}</el-tag>
            <el-tag v-else-if="scope.row.state == '-1'" type="warning" size="mini">{{scope.row.state_txt}}</el-tag>
            <el-tag v-else-if="scope.row.state == '-2'" type="danger" size="mini">{{scope.row.state_txt}}</el-tag>
        </template>
        </el-table-column>
        <el-table-column
          prop="created_time"
          align="center"
          label="操作时间">
        </el-table-column>
        <el-table-column
          prop="balance_money"
          align="center"
          label="操作">
          <template slot-scope="scope">
             <el-button type="text" v-if="currentTally.role!='accountant'" @click="showProductDetail(scope.$index,scope.row)">产品明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>

      <!--分页------>
      <p style="margin-top: 10px;text-align: center">
        <el-pagination
        background
        layout="prev, pager, next, total"
        :page-size="recordListPage.pageSize"
        :total="recordListPage.totalCount"
        @current-change="handleRecordPageChange"
        v-if="recordListData.length >= recordListPage.pageSize"
        >
        </el-pagination>
      </p>
  </el-card>

    <!--采购退货 操作表单---->
    <stock-sales-form ref="salesFormRef" :dialogShow="salesDialog" :salesOptType="salesOptType"  @modalClose="salesModalClose"></stock-sales-form>
    <!--产品明细--->
    <stock-record-product-details ref="salesDetailsRef" :dialogShow="salesDetailsDialog" :recordList="currentProductDetails"  @modalClose="salesDetailsModalClose"></stock-record-product-details>
</div>
    `,
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally () {
                return this.$store.state.currentTally
            },
            userData () {
                return this.$store.state.userData
            },
        },
        data:function(){
            return {
                // 账单记录
                recordListData:[],
                recordCurrentPage:1,
                recordListPage:{
                    pageSize:10,
                    totalCount:0,
                },
                recordSearchForm:{},

                // 操作表单
                salesDialog:false, // 出入库表单
                salesOptType:'optSale', // 操作类型1/4

                // 产品明细
                salesDetailsDialog:false,
                currentProductDetails:[],
            }
        },
        methods:{
            initData() {
                this.getRecordList()
                // this.getSummary()
            },
            refresh() {
                this.recordCurrentPage = 1;
                this.initData()
            },
            handleRecordPageChange(currentPage) {
                this.recordCurrentPage = currentPage
                this.getRecordList()
            },
            getRecordList() {
                let that = this
                let getUrl = '/api/stock-record/lists'
                that.recordSearchForm['tally_id'] = that.currentTallyId,
                that.recordSearchForm['page'] = that.recordCurrentPage,
                axios.get(getUrl,{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: that.recordSearchForm
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.recordListData = res.data.data.data
                        that.recordListPage = res.data.data['pageInfo']
                    }else{
                        that.$message({
                            type: 'error',
                            message: '获取失败:'+res.data.error_message
                        })
                    }
                })
            },
            getSummary() {
                let that = this
                let getUrl = '/api/stock-balance/summary'
                let params = {
                    tally_id : that.currentTallyId,
                }
                axios.get(getUrl,{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: params
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.totalBalanceMoney = res.data.data['total_balance_money']
                    }else{
                        that.$message({
                            type: 'error',
                            message: '获取失败:'+res.data.error_message
                        })
                    }
                })
            },
            search() {
                this.recordCurrentPage = 1
                this.getRecordList()
            },
            getAll() {
                this.recordCurrentPage = 1
                this.recordSearchForm = {}
                this.getRecordList()
            },
            salesModalClose() {
                this.salesDialog = false
                this.getRecordList()
            },
            optSale() {
                //到期了
                if(this.$store.state.day < 0){
                    this.$store.state.buyTallyShow = true;
                    return;
                }
                this.salesOptType = 'optSale'
                this.$refs['salesFormRef'].resetForm()
                this.salesDialog = true;
            },
            optPurchase() {
                //到期了
                if(this.$store.state.day < 0){
                    this.$store.state.buyTallyShow = true;
                    return;
                }
                this.salesOptType = 'optPurchase'
                this.$refs['salesFormRef'].resetForm()
                this.salesDialog = true;
            },
            optSaleRefund() {

                //到期了
                if(this.$store.state.day < 0){
                    this.$store.state.buyTallyShow = true;
                    return;
                }
                this.salesOptType = 'optSaleRefund'
                this.$refs['salesFormRef'].resetForm()
                this.salesDialog = true;
            },
            optPurchaseRefund() {
                //到期了
                if(this.$store.state.day < 0){
                    this.$store.state.buyTallyShow = true;
                    return;
                }
                this.salesOptType = 'optPurchaseRefund'
                this.$refs['salesFormRef'].resetForm()
                this.salesDialog = true;
            },
            indexCal(index,type) {
                return (this.recordCurrentPage-1) * this.recordListPage.pageSize +  parseInt(index) + 1
            },
            showProductDetail(index,row) {
                this.salesDetailsDialog = true
                this.currentProductDetails = JSON.parse(JSON.stringify(row['product_detail']))
            },
            salesDetailsModalClose() {
                this.salesDetailsDialog = false
            },
        }
    })
</script>

<style>
    .t-r{text-align: right}
    .l-p{
        line-height: 30px;
        margin-bottom: 10px;
    }
    .l-p p{
        font-size: 15px;
        font-weight: bold;
    }
    .flow-box{
        cursor: initial;
    }
</style>
